<template>
    <l-page class="block pb-3">
        <l-navbar title="业务员入驻"></l-navbar>

        <view class="panel text-center text-xl" v-if="userInfo.check_status !== undefined">
            <u-alert :show-icon="true" v-if="userInfo.check_status == 1" type="success"
                description="恭喜您已经成为我司业务员!"></u-alert>
            <u-alert :show-icon="true" v-if="userInfo.check_status == 0" type="info" description="待审核"></u-alert>
            <u-alert title="审核不通过" :show-icon="true" v-if="userInfo.check_status == 2" type="error"
                :description="userInfo.remark"></u-alert>
        </view>
        <view class="panel text-center text-xl" v-if="userInfo.check_status == 1">
            <u-button type="primary" icon="share-fill" text="分享海报"></u-button>
        </view>
        <view class="panel" v-if="userInfo.check_status === undefined || userInfo.check_status === 2">
            <l-select label="学历" class="mt-3" v-model="formData.education_level"
                :list="settings.dict_education_level"></l-select>

            <view class="flex items-center mt-3">
                <view class="mr-3">是否有按揭经验</view>
                <u-radio-group v-model="formData.has_experience">
                    <u-radio shape="circle" :name="1" label="否"></u-radio>
                    &emsp;
                    <u-radio shape="circle" :name="0" label="是"></u-radio>
                </u-radio-group>
            </view>
            <view class="mt-3">
                <view>身份证正面</view>
                <l-upload class="mt-3" v-model="formData.id_photo_front"></l-upload>
            </view>
            <view class="mt-3">
                <view>身份证背面</view>
                <l-upload class="mt-3" v-model="formData.id_photo_back"></l-upload>
            </view>
            <l-button class="mt-3" @tap="submit">提交认证</l-button>
        </view>
        <view class="panel" v-else>
            <view class="flex mt-1">
                <view class="mr-3">姓 &nbsp; &nbsp; &nbsp; 名：</view>
                <view>{{ userInfo.realname }}</view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">性 &nbsp; &nbsp; &nbsp; 别：</view>
                <view>
                    <text v-if="userInfo.sex == 1">男</text>
                    <text v-else>女</text>
                </view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">学 &nbsp; &nbsp; &nbsp; 历：</view>
                <view>{{ userInfo.education_level }}</view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">民 &nbsp; &nbsp; &nbsp; 族：</view>
                <view>{{ userInfo.ethnicity }}</view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">出生日期：</view>
                <view>{{ userInfo.birthday }}</view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">身份证号：</view>
                <view>{{ userInfo.id_num }}</view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">身份有效期：</view>
                <view>{{ userInfo.valid_period }}</view>
            </view>
            <view class="flex mt-1">
                <view class="mr-3">户口所在地：</view>
                <view>{{ userInfo.address }}</view>
            </view>
            <view class="mt-1">
                <view class="mr-3">身份证正面：</view>
                <view class="mt-3">
                    <image class="w-[600rpx] h-[400rpx]" :src="$imgBase + userInfo.id_photo_front" />
                </view>
            </view>
            <view class="mt-1">
                <view class="mr-3">身份证背面：</view>
                <view class="mt-3">
                    <image class="w-[600rpx] h-[400rpx]" :src="$imgBase + userInfo.id_photo_back" />
                </view>
            </view>
            <l-button class="mt-3" v-if="userInfo.check_status == 2"
                @tap="userInfo.check_status = undefined">重新认证</l-button>
        </view>
    </l-page>
</template>
<script setup lang="ts">
import Authentication from "@/stores/authentication";
import { reactive } from "vue";
import Settings from "@/stores/settings"
import Login from "@/stores/login"
const login = Login()
let { apply, getDetail } = Authentication()
let formData = reactive({
    education_level: '',
    has_experience: 1,
    id_photo_front: 'https://cdn.uviewui.com/uview/demo/upload/positive.png',
    id_photo_back: undefined,
})
let settings = Settings();
let userInfo: { [key: string]: any } = reactive({
    check_status: undefined,
    remark: undefined,
    realname: '',
    sex: 0,
    ethnicity: '',
    id_num: '',
    address: '',
    birthday: '',
    issue_authority: '',
    education_level: '',
    valid_period: '',
    id_photo_front: '',
    id_photo_back: ''
})
function submit() {
    const checkData = {
        education_level: '请选择学历',
        id_photo_front: '请上传身份证正面',
        id_photo_back: '请上传身份证背面'
    }
    for (let key in checkData) {
        if (!formData[key as keyof typeof formData]) {
            return uni.showToast({
                title: checkData[key as keyof typeof checkData],
                icon: 'none'
            })
        }
    }
    apply(formData, ['id_photo_front', 'id_photo_back'])
}

getDetail().then((res: any) => {
    Object.keys(userInfo).forEach((item) => {
        userInfo[item] = res[item]
    })
})
</script>